<template>
    <div class="table-page">
        <div
            class="table-page-item"
            v-for="(val, key) in keys"
            :key="key"
            :class="{ item100: fullKeys.includes(key) }"
        >
            <div class="table-page-item-label">{{ val }}</div>
            <div class="table-page-item-value">{{ data[key] }}</div>
        </div>
    </div>
</template>
<script setup>
const props = defineProps({
    keys: {
        type: Object,
        default: () => {},
    },
    data: {
        type: Object,
        default: () => {},
    },
    fullKeys: {
        type: Array,
        default: () => [],
    },
});
</script>
<style lang="less" scoped>
.table-page {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    &-item {
        min-width: calc(50% - 40px);
        flex: 1;
        border-top: 1px solid var(--border-color);
        border-left: 1px solid var(--border-color);
        display: flex;
        &.item100 {
            min-width: 100%;
        }
        &-label {
            padding: 16px 24px;
            background: var(--item-active-color);
            min-width: 100px;
            max-width: 100px;
            border-right: 1px solid var(--border-color);
            color: var(--text-color-base-2);
            flex-direction: column;
            justify-content: center;
            display: flex;
        }
        &-value {
            padding: 16px 24px;
            flex-direction: column;
            justify-content: center;
            display: flex;
        }
    }
}
</style>
